<template>
  <el-dialog
    :close-on-click-modal="false"
    :model-value="api.editState.visible"
    :title="api.editState.title"
    destroy-on-close
    @close="api.onCloseEdit()"
  >
    <el-form
      ref="formRef"
      :model="api.editState.form"
      :rules="rules"
      label-width="120px"
      status-icon
      class="article-create"
    >
      <el-form-item
        label="封面"
        prop="banner"
      >
        <IAvatarUploader v-model="api.editState.form.banner" />
      </el-form-item>

      <el-form-item
        label="标题"
        prop="title"
      >
        <el-input
          v-model="api.editState.form.title"
          clearable
          placeholder="标题"
        />
      </el-form-item>

      <el-form-item
        label="副标题"
        prop="subTitle"
      >
        <el-input
          v-model="api.editState.form.subTitle"
          clearable
          placeholder="副标题"
        />
      </el-form-item>

      <el-form-item
        label="类型"
        prop="typeId"
      >
        <el-select
          class="fill-width"
          v-model="api.editState.form.typeId"
          clearable
          placeholder="类型"
        >
          <el-option
            v-for="item in typeApi.tableState.dataSource"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        label="关键字"
        prop="keywords"
      >
        <el-input
          v-model="api.editState.form.keywords"
          clearable
          placeholder="关键字"
        />
      </el-form-item>

      <el-form-item
        label="是否发布"
        prop="enable"
      >
        <el-radio-group v-model="api.editState.form.enable">
          <el-radio :label="true" border>发布</el-radio>
          <el-radio :label="false" border>隐藏</el-radio>
        </el-radio-group>
      </el-form-item>


      <el-form-item
        label="文章内容"
        prop="content"
      >
        <i-editor v-model:model-value="api.editState.form.content" :height="'60vh'"></i-editor>
      </el-form-item>

      <el-form-item class="mb-0">
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="api.onCloseEdit()">关闭</el-button>
      </el-form-item>

    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ArticleApi, ArticleTypeApi } from "~/api/system/article/article.api";
import { FormRules } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { ImageApi } from "~/api/system/file/image.api";

interface Props {
  api: ArticleApi;
  typeApi: ArticleTypeApi;
}

const { api,typeApi } = withDefaults(defineProps<Props>(), {});

const formRef = ref();
const rules = reactive<FormRules>({});

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.submit(api.editState.form).then((res: any) => {
      if (res.ok) {
        api.onCloseEdit();
      }
    });
  }
}

</script>

<style lang="scss" scoped>
.article-edit {

}
</style>
